<template>
  <div class="box">
    <div class="top">
      <span>我的订单</span>
    </div>
    <template v-for="(productList,shopId) in cartList" :key="productList.id">
        <div class="productInfo" style="padding-top: 15px;padding-left: 15px;box-sizing: border-box;">
            沃尔玛{{}}
            <div class="product" style="display: flex;">
                <template v-for="item in productList">
                    <div class="product__item">
                        <div style="margin-right: 5px;flex: 1;">
                            <img class="item__img" style="" :src="item.imgUrl" alt="" />
                        </div>
                    </div>
                </template>
                <div style="flex: 1;text-align: right;">
                    <div class="product__price">总价{{(vuexTotalPrice[shopId].sumPrice).toFixed(2)}}</div>
                    <div class="product__total">共{{caculations.total}}件</div>
                </div>
            </div>
        </div>
    </template>
    <DockerVue></DockerVue>
  </div>
</template>
<script>
import { useStore } from "vuex";
import DockerVue from "@/components/Docker.vue";
import { useCommomCartEffect } from "../../effect/useCartEffect.js";
const cartEffect = (shopId) => {
  const { productList, cartList,caculations } = useCommomCartEffect(
    shopId
  );

  return {
    productList,
    cartList,
    caculations
  };
};
export default {
  components: {
    DockerVue,
  },
  setup() {
    const store = useStore();
    const { vuexTotalPrice } = store.state
    const {productList,cartList,caculations} = cartEffect(1);//因为是读取所有内容，所有shopip象征性的传个1
    let price = [];
    let i=0,j=0;
    for(let key in cartList){
        price[i] = 0;
        console.log(cartList[key]);
        for(let key2 in cartList[key]){
            // console.log(parseFloat(cartList[key][key2].price));

            price[i] += ( parseFloat(cartList[key][key2].price));
            j++;
            // console.log(cartList[key][key2].price);
        }
        i++;
    }
    console.log(j);// 商品数
    console.log("cartList.sumPrice:",cartList);
    return { cartList,productList,caculations,price,vuexTotalPrice };
  },
};
</script>
<style lang="scss" scoped>
.box{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: #f8f8f8;
    .top{
        font-weight: bold;
        height: 64px;
        width: 100%;
        text-align: center;
        background-color: #fff;
        line-height: 64px;
        font-size: 16px;
        color: #333333;
    }
    .productInfo {
    width: 330px;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 16px;
    .product {
      bottom: 0px;
      left: 0px;
      right: 0px;
      &__price{
        font-size: 14px;
        color: #E93B3B;
      }
      img {
        width: 46px;
        height: 46px;
      }
      .item {
        margin-top: 10px;
        display: flex;

        &__img {
        //   margin-left: 15px;
        width: 40px;
        height: 40px;
        }

        img {
          width: 56px;
          height: 56px;
        }
      }
    }
  }
}

</style>
